/**
 * Created by dio on 2017/2/24 0024.
 */
import React, {Component} from "react";
import {ActivityIndicator, Image, InteractionManager, Text, TouchableOpacity, View} from "react-native";
import Gallery from "react-native-gallery";
import chjStyle from "../../../CustomStyle";
import {Actions} from "react-native-router-flux";

export default class ChjGallery extends Component {
    constructor(props) {
        super(props);
        this.selectedIndex = 0;
        this.state = {
            isLoading: true,
            images: [],
            selectedIndex: 0
        };
        for (let i = 0; i < this.props.images.length; i++) {
            const imgUrl = this.props.images[i].bimg;//.replace('press512pic/', '');
            this.state.images.push(imgUrl);
        }
    }

    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            this.setState(
                {
                    isLoading: false,
                }
            );
        });
    }

    render() {
        if (this.state.isLoading) {
            return (
                <ActivityIndicator
                    animating={true}
                    style={{alignItems: 'center', justifyContent: 'center', height: chjStyle.height}}
                    size="large"/>
            );
        }
        // this.state.images

        /**
         *                 <Text ref='title'
         style={{color:'#fff',position:'absolute',
                    textAlign:'center',
                    left:chjStyle.getActualSizeInVertical(20),
                    top:chjStyle.getActualSizeInVertical(90),
                    width: chjStyle.getActualSizeInHorizontal(700),
                    height:chjStyle.getActualSizeInVertical(72)}}>{this.props.route.ttttt[this.state.selectedIndex].text}</Text>
         * */

        return (
            <View style={{flex: 1, backgroundColor: 'black'}}>
                <Gallery
                    onPageSelected={(val) => {
                    }}
                    style={{flex: 1, backgroundColor: 'black'}}
                    images={this.state.images}
                />

                <Text style={{
                    backgroundColor: '#00000000',
                    position: 'absolute',
                    textAlign: 'center',
                    color: '#fff',
                    fontSize: chjStyle.getActualFontSize(36),
                    left: chjStyle.getActualSizeInVertical(20),
                    top: chjStyle.getActualSizeInVertical(85),
                    width: chjStyle.getActualSizeInHorizontal(710),
                    height: chjStyle.getActualSizeInVertical(72)
                }}>{this.props.title}</Text>
                <TouchableOpacity onPress={() => Actions.pop()}
                                  style={{
                                      backgroundColor: '#00000000',
                                      position: 'absolute',
                                      left: chjStyle.getActualSizeInVertical(20),
                                      top: chjStyle.getActualSizeInVertical(72),
                                      width: chjStyle.getActualSizeInHorizontal(72),
                                      height: chjStyle.getActualSizeInVertical(72)
                                  }}>
                    <Image source={require('../../../../img/back.png')}
                           resizeMode='contain'
                           style={{
                               width: chjStyle.getActualSizeInHorizontal(72),
                               height: chjStyle.getActualSizeInVertical(72)
                           }}/>
                </TouchableOpacity>
            </View>
        );
    }
}